<template>
  <div  class='relative'>
  	<!-- 搜索栏 -->
  	<a-row  class='mb20'>  
  		<a-col  :span='4'  style='float: right;'>
  			<a-button type="primary" icon="plus-circle"  @click='add'>新建</a-button>
  		</a-col>
  	</a-row> 
	<!-- 表格切换 -->
  <a-spin   :indicator="indicator"  tip="正在加载中..."  :spinning='spinning'  :delay="delayTime">
  		<a-table :columns="columns" :dataSource="data"  :rowKey="record => record.code" :pagination="pagination"  @change="handleTableChange"> 
  			<span slot="assetsType"  slot-scope="text, record">{{text | propertyType}}</span>
  			<span slot="createTime"  slot-scope="text, record">{{text | formatDate}}</span>

  			<span slot="status"  slot-scope="text, record">{{text | auditStatus}}</span>
  			<span slot="action" slot-scope="text, record">
  			  <span  class='color-blue'  @click='edit(record)'> 编辑</span>
  			  <a-divider type="vertical" /> 
  				<a-popconfirm title="确认删除当前数据？" @confirm="confirmDel(record.code)"   okText="确认" cancelText="取消">
  				    <a href="javascript:;"  class='color-red'>删除</a>
  				</a-popconfirm>
  			</span>
  		</a-table>
	</a-spin>
	<QAModal  ref='QAmodalForm'  :visible='modalShow'  v-on:handleCancel='modalShow=false'  v-on:handleOk='finishModal'></QAModal>
  </div>
</template>

<script>
import { list_QA,delQA }  from  '@/api/product/index'
import QAModal from '@/components/product/QA'
export default {
  name: 'productQA',
  data () {
    return {
      	spinning:false,
      	indicator:<a-icon type="loading-3-quarters"  spin  style="{ fontSize: '16px' }"/> ,
      	delayTime:1000,
      	modalShow:false,
        currentType:'1',//当前tab值
      	/*表格栏*/
        columns:[{
        		  title:'问题描述',
  			  dataIndex: 'question',
  			  key: 'question', 
  			},  {
  			  title: '创建人',
  			  dataIndex: 'createUserName',  
  			}, {
  			  title: '创建时间',
  			  dataIndex: 'createTime',
  			  scopedSlots: { customRender: 'createTime' },
  			},  
  			{
  			  title: '操作',
  			  key: 'action',
  			  scopedSlots: { customRender: 'action' },
  			}],
  		 
    		data:[], 
    		search:{
    			keyWord:'',
    			pageNo:1,
    			pageSize:10,
    			type:'1',
    		}, 
    		pagination:{
    	        total:0,
    	        pageSize: 10,//每页中显示10条数据
    	        showSizeChanger: true,

    	        pageSizeOptions: ["10", "20"],//每页中显示的数据
    	        showTotal: total => `共有 ${total} 条数据`,  //分页中显示总的数据
    	  },                                                                                        
    }
  },
  created(){
  	this.pageInit()
  },
  methods:{
  	add(){ 
  		 this.$refs.QAmodalForm.$emit('openDialog')
      	this.modalShow = true
  	},
  	finishModal(){
  		this.modalShow = false
  		this.pageInit()
  	},
  	edit(data){
  		this.$refs.QAmodalForm.$emit('editDialog',data)
      	this.modalShow = true
  	},
  	async pageInit(){ 
  		this.spinning = true
  		await list_QA(this.search).then((res)=>{
  			if(res.data.flag == true){
  				this.data = res.data.dataList
  				this.pagination.total = res.data.totalRs
  			}
  			this.spinning = false
  		})
  		
  	},
  	 confirmDel(code){
      delQA(code).then((res)=>{
      	if(res.data.flag == true){
      		this.$message.success(res.data.msg)
      		this.pageInit()
      	}
      })
    },
    productChange(val){ 
    	this.search.keyWord = ''
    	this.search.type = val
    	this.search.pageNo = 1
    	this.search.pageSize = 10
    	this.pageInit()
    },
     /*table页数变化*/
    handleTableChange (pagination, filters, sorter) {
        // console.log(pagination);
        this.search.pageNo = pagination.current
        this.search.pageSize =pagination.pageSize
        this.pageInit()
    },
    
    
  },
  components:{
  	QAModal
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.ant-input{width: 200px;}
</style>
